<template>
    <el-menu :default-active="activeMenu" :style="{width:MenuCollapse?'auto':'220px'}" mode="vertical" :collapse="MenuCollapse" :collapse-transition="false" background-color="#1c222b" text-color="rgb(193, 198, 200)" active-text-color="#ffffff" style="height:100%; --el-menu-hover-bg-color:#2d5fff;" class="menu">
        <div v-if="!MenuCollapse" class="el-menu-group">售后/服务</div>
        <div v-else class="el-menu-group-line"></div>
        <el-menu-item index="/index" @click="$router.push({name:'index'})">                        
            <i class="wi wi-home-nav"></i>
            <span>首页</span>
        </el-menu-item>
        
        <div v-if="!MenuCollapse" class="el-menu-group">后台/管理</div>
        <div v-else class="el-menu-group-line"></div>
        <template v-for="item in menu">
            <el-menu-item v-if="!item.children || !item.children.length" :key="item" :index="item.do" @click="toPath(item.do)">
                <i :class="'wi wi-'+item.icon"></i>
                <span class="menuitem">{{item.title}}</span>
            </el-menu-item>
            <template v-if="item.children">
                <el-sub-menu popper-class="el-menu--console" :key="item" :index="item.do">
                    <template #title>
                        <i :class="'wi wi-'+item.icon"></i>
                        <span class="menuitem">{{item.title}}</span>
                    </template>
                    <el-menu-item v-for="children in item.children" :key="children.do" :index="children.do" @click="toPath(children.do)">
                        <span>{{children.title}}</span>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </template>
        
        <div class="open-menu" @click="changeMenuCollapse">
            <!-- <i :class="{'el-icon-s-fold':!MenuCollapse, 'el-icon-s-unfold':MenuCollapse}"></i> -->
            <el-icon v-if="MenuCollapse"><Expand /></el-icon>
            <el-icon v-else><Fold /></el-icon>
            <span v-if="!MenuCollapse" style="margin:0 26px 0 8px;">{{MenuCollapse?'':'收起'}}</span>
        </div>
    </el-menu>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data(){
        return {
            activeMenu: "/index",
            baseurl: "/install/app/xxx/founder",
            menu: [],
            iframe: false,
        }
    },
    created(){
        if(this.roleInfo){
            this.menu = this.roleInfo.menu;
            this.iframe = this.roleInfo.iframe;
        }
        this.changeRote();
    },
    computed: {
        ...mapState(['roleInfo','MenuCollapse']),
    },
    methods: {
        toPath(index){
            this.$router.push(this.baseurl+(this.iframe?"/iframe":"/micro")+index);
        },
        changeRote(){
            if(this.$route.name=="index"){
                this.activeMenu = "/index"
            }else if(this.$route.params && this.$route.params.page && this.$route.params.page.length){
                this.activeMenu = "/"+this.$route.params.page.join("/");
            }else{
                this.activeMenu = this.$route.fullPath.replace(this.baseurl,"");
            }
        },
        // 修改菜单状态
        changeMenuCollapse(){
            this.$store.commit("setMenuCollapse",!this.MenuCollapse)
        },
    },
    watch: {
        $route(){this.changeRote()},
        roleInfo(){
            this.menu = this.roleInfo.menu;
            this.iframe = this.roleInfo.iframe;
        }
    }
}
</script>

<style scoped>
.menu{height:100%; background-color: #1c222b;}
.menu .menuitem{margin-left:10px;}
.el-menu-group{font-size: 12px; color: #7c878e; padding: 0 20px; line-height: 40px; position: relative;}
.el-menu-group-line{
    padding:10px 0;
    margin:0 auto;
    width: 30px;
}
.el-menu-group-line::after{content:" "; display:block; width:100%; border-top:1px solid #ffffff;}
.open-menu{
    position:absolute;
    bottom:0;
    left:0; 
    right:0;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:rgb(193, 198, 200);
    background:#232a35;
    cursor:pointer;
}
</style>